<template>
    <div class="programModify">
        
        <el-form 
            ref="ruleForm" 
            label-width="100px"
            :model="ruleForm">
            <el-form-item label="小程序名称">
                <el-select v-model="ruleForm.appname" :placeholder=appname @change="handleChange">
                    <el-option :label=item.appname :value=item.appid v-for="(item,index) in options" :key="index">{{item.appname}}-{{item.appid}}</el-option>
                </el-select>
            </el-form-item>
            <el-upload
                class="upload-demo"
                action="https://www.yyjpai.com/index/operate/uploadsImg"
                :on-success=handleAvatarSuccess
                :file-list="fileList"
                name="file"
                list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <el-form-item label="商品名称">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格">
                <el-input v-model="ruleForm.price"></el-input>
            </el-form-item>
            <el-form-item label="兑换金币数">
                <el-input v-model="ruleForm.num"></el-input>
            </el-form-item>
            <el-form-item label="每日兑换上限">
                <el-input v-model="ruleForm.limit"></el-input>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="ruleForm.sort"></el-input>
            </el-form-item>
        </el-form>
       <el-button @click="submitForm('ruleForm')" size="medium" class="addSubimit">提交</el-button>
    </div>
</template>
<script>
import { AddData,getChannel } from '@/assets/js'
export default {
    data(){
        return {
            urlData:"",//图片上传成功之后的参数
            options:[],//下拉
            urlSize:1,//上传图片数量
            fileList: [],//图片数组
            ruleForm:{//下拉选中
                appid:'',
                appname:this.appname,
                name:this.name,
                price:this.price,
                num:this.num,
                limit:this.limit,
                sort:this.sort
            }
        }
    },
    mounted:function(){
        getChannel(this)
    },
    methods:{
        handleChange:function(e){//change小程序下拉
            this.ruleForm.appid = e
        },
        handleAvatarSuccess(res, file) {//上传成功之后
            this.urlData = file.response.data.logo
        },
        submitForm:function(e){//点击提交
            var data = {
                id: this.ruleForm.id?this.ruleForm.id:this.id,
                appid: this.ruleForm.appid?this.ruleForm.appid:this.appid,
                logo:this.urlData != '' && typeof this.urlData !=  undefined ? this.urlData : this.logo,
                name: this.ruleForm.name?this.ruleForm.name:this.name,
                price: this.ruleForm.price?this.ruleForm.price:this.price,
                exchangeGoldNum: this.ruleForm.num?this.ruleForm.num:this.num,
                exchangeUpperLimit: this.ruleForm.limit?this.ruleForm.limit:this.limit,
                sort: this.ruleForm.sort?this.ruleForm.sort:this.sort,
            }
            AddData(this,e,data,'exchange_goods/editGoods')
        }
    },
    props:['id',"appid","logo","appname","name","price","limit","sort","num"]
}
</script>